<template>
  <view>
    <hx-navbar ref="hxnb" :config="config"></hx-navbar>
    <u-loading-page :loading="pageLoading"></u-loading-page>
    <u-empty mode="list" v-if="listData.length === 0" :style="{ height: `${screenHeight}px` }" />
    <scroll-view class="" v-if="!pageLoading && listData.length > 0" scroll-y refresher-enabled show-scrollbar
      :refresher-triggered="triggered" @refresherrefresh="$u.throttle(onRefresherrefresh, 200)"
      @scrolltolower='$u.throttle(onScrolltolower, 1000)' :style="{ height: `${screenHeight}px` }">
      <!-- 列表 -->
      <view class="p-l-30 p-r-30">
        <view class="item" v-for="(item, index) in listData" :key="index" @tap="itemClick(item)">
          <view>
            <view class="name">幅宽：{{ item.widthValue }}{{ item.widthUnitName }}</view>
            <view class="name">克重：{{ item.gramWeightValue }}{{ item.gramWeightUnitName }}</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {
  listOptionsPageBySpuId
} from '@/apis/bill/information/product'
export default {
  data() {
    return {
      config: {
        title: "选择幅宽和克重",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
      },
      searchData: {},
      spuId: null,
      screenHeight: 0,
      pageLoading: true,
      triggered: false,
      listData: [],
      pageInfo: {
        current: 1, // 当前页
        size: 10, // 每页数据条数
        sort: '', // 排序字段
        order: 'desc', // 排序方向
        total: 0 // 总数居量
      }
    }
  },
  onLoad() {
    const spuId = this.$Route.query.spuId
    // const spuId = '1692526507748098048'
    this.spuId = spuId
    if (spuId) {
      this.$set(this.searchData, 'spuId', spuId)
      this.listPage()
    }
  },
  onReady() {
    const sysInfo = uni.getSystemInfoSync()
    this.screenHeight = sysInfo.windowHeight
  },
  methods: {
    listPage(params = {
      page: this.pageInfo,
      data: this.searchData
    }) {
      uni.showLoading({
        title: "加载中"
      })
      listOptionsPageBySpuId(params).then(res => {
        console.log("res", res);
        if (!res.flag) return
        const records = res.data.records || []
        this.listData.push(...records)
        console.log(" this.listData", this.listData);
      }).finally(_ => {
        this.triggered = false
        this.pageLoading = false
        uni.hideLoading()
      })
    },
    itemClick(row) {
      uni.$emit("on-selected-goods-width-gram", row)
      this.$Router.back()
    },
    onSearchChange() {
      this.handlerSearch()
    },
    handlerSearch: _.debounce(function () {
      this.listData = []
      this.listPage()
    }, 300),
    onRefresherrefresh() {
      this.listData = []
      this.listPage()
    },
    onScrolltolower() {
      this.triggered = true
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  border-radius: 10rpx;
  background: #fff;
  padding: 30rpx;
  margin-top: 30rpx;
}
</style>